<!--
 * @Author: wangshuguang
 * @Date: 2022-03-14 13:58:18
 * @LastEditTime: 2022-10-17 09:28:46
 * @LastEditors: wangshuguang
 * @Description: 超级会员插件
-->

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <div class="leftLine title">
      插件{{ index }}： 超级会员
    </div>
    <div class="plugContent">
      <el-form-item label="" prop="openAmt">
        <div v-if="pageType == 'detail'">
          <span class="mg-r-20 formItemLabel">开通费用</span>
          <span class="mg-r-20">
            {{ form.openAmt }}元，包含{{ form.merQuota }}家合作商户名额
          </span>
        </div>
        <div v-else-if="['edit', 'add'].includes(pageType)">
          <span class="mg-r-20 formItemLabel">开通费用</span>
          <span class="mg-r-20">
            <el-input-number v-model="form.openAmt" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" />元，包含
            <el-input-number v-model="form.merQuota" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="1" @change="merQuotaChange" />家合作商名额
          </span>
        </div>
      </el-form-item>
      <el-form-item label="" prop="yearAutoPay">
        <span class="mg-r-20 formItemLabel">年费</span>
        <span class="mg-r-20">
          <span v-if="pageType == 'detail'" class="mg-r-20">
            {{ form.yearAutoPay == 1 ? '每年自动续费' : '无年费' }}
          </span>
          <el-select v-else v-model="form.yearAutoPay" size="small">
            <el-option label="每年自动续费" :value="1" />
            <el-option label="无年费" :value="0" />
          </el-select>
          <span style="color: #ddd;">开启自动续费将在续费日从核心商户钱包余额中自动扣除相应费用</span>
        </span>
      </el-form-item>
      <el-form-item label="" prop="pluginSpecialConfs">
        <div class="formBox">
          <span class="mg-r-20 formItemLabel">特殊费用</span>
          <span class="mg-r-20 formItemValue">
            <el-button v-if="pageType != 'detail'" type="text" @click="addConfLine">添加配置</el-button>
            <AddList v-model="form.pluginSpecialConfs" :show-add-btn="false" :show-del-btn="false">
              <template v-slot="{item: { item, index }}">
                <div v-if="pageType == 'detail'">
                  <span class="mg-r-20 formItemLabel">配置{{ index + 1 }}</span>
                  <span class="mg-r-20">
                    {{ item.merNum }}家合作商家以上，{{ item.isAddYear == 1 ? `每个合作商家加收年费${item.addYearAmt}元` :'不收取额外费用；' }}
                  </span>
                </div>
                <div v-else-if="['edit', 'add'].includes(pageType)" class="formBox">
                  <div class="formBox formItemValue">
                    <span class="mg-r-20 formItemLabel">配置{{ index + 1 }}</span>
                    <span class="mg-r-20 formItemValue">
                      <!-- 合作商数量 第一条配置，数量默认绑定开通费用中的合作商名额数量  不可修改 -->
                      <span v-if="index == 0" class="numInput">{{ form.merQuota }}</span>
                      <el-input-number v-else v-model="item.merNum" :disabled="index == 0" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="1" />家合作商家以上，
                      <el-select v-model="item.isAddYear" size="small" class="selectItem">
                        <el-option label="加收费用" :value="1" />
                        <el-option label="无年费" :value="0" />
                      </el-select>
                      <span v-show="item.isAddYear == 1">
                        每个合作商家加收年费
                        <el-input-number v-model="item.addYearAmt" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" />元；
                      </span>
                    </span>
                  </div>
                  <div class="formItemLabel">
                    <el-button v-if="index != 0" type="danger" size="small" icon="el-icon-delete" circle @click="delLine(index)" />
                  </div>
                </div>
              </template>
            </AddList>
          </span>
        </div>
      </el-form-item>
      <el-form-item label="" prop="minBkgeAmt">
        <span class="mg-r-20 formItemLabel">抽佣门槛</span>
        <span class="mg-r-20">
          会员实付金额≥
          <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.minBkgeAmt" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" />
          <span v-else>{{ form.minBkgeAmt }}</span>
          元才抽取佣金
        </span>
      </el-form-item>
      <el-form-item label="" prop="bkgeRate">
        <span class="mg-r-20 formItemLabel">插件抽佣比</span>
        <span class="mg-r-20">
          实付金额的
          <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.bkgeRate" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" :max="20" />
          <span v-else>{{ form.bkgeRate }}</span>
          %作为佣金，若会员使用插件实付100元，将抽取{{ form.bkgeRate }}元作为佣金
        </span>
      </el-form-item>
      <!-- <el-form-item label="" prop="agtList">
        <div v-if="pageType == 'detail'">
          <span class="mg-r-20 formItemLabel">自定义抽佣比</span>
          <span class="mg-r-20">
            <span v-if="form.zdy">不限制</span>
            <span v-else>区间限制{{ form.start }}%-{{ form.end }}%</span>
          </span>
        </div>
        <div v-else-if="['edit', 'add'].includes(pageType)">
          <span class="mg-r-20 formItemLabel">自定义抽佣比</span>
          <span class="mg-r-20">
            <el-switch v-model="form.switchValue" />
            <span v-show="form.switchValue">
              自定义抽佣比区间限制
              <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.money" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="1" :max="10" />
              %-
              <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.money" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="1" :max="10" />
              %
            </span>
          </span>
        </div>
      </el-form-item> -->
      <el-form-item label="" prop="specialRoleRate">
        <span class="mg-r-20 formItemLabel">特殊角色抽佣</span>
        <span class="mg-r-20">
          核心商户抽取插件佣金的
          <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.specialRoleRate" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" :max="100" />
          <span v-else>{{ form.specialRoleRate }}</span>
          %，其上级代理体系可获佣金的{{ 100 - (form.specialRoleRate || 0) }}%
        </span>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import AddList from '@/components/AddList/index.vue'
export default {
  components: { AddList },
  props: {
    form: {},
    index: {},
    pageType: {}
  },
  data() {
    return {
      rules: {
        openAmt: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        pluginSpecialConfs: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        minBkgeAmt: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        bkgeRate: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        yearAutoPay: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        specialRoleRate: [{ validator: this.valid, trigger: ['change', 'blur'] }]
      }
    }
  },
  mounted() {
    console.log('superMember mounted ', this.form)
    console.log('superMember pageType ', this.pageType)
  },
  methods: {
    merQuotaChange(val) {
      console.log('merQuotaChange', val)
      // 默认特殊费用第一条取开通费用中的合作商名额  所以动态关联
      const confs = this.form.pluginSpecialConfs
      if (confs.length && confs[0]) {
        confs[0].merNum = val
      }
    },
    addConfLine() {
      // 新增特殊配置
      this.form.pluginSpecialConfs.push({})
    },
    delLine(index) {
      this.form.pluginSpecialConfs.splice(index, 1)
    },
    valid(rule, value, callback) {
      const { field } = rule
      let text = ''
      const _form = this.form
      console.log('rule, value, callback', rule, value)
      switch (field) {
        case 'openAmt': {
          // 开通费用
          if (!_form.openAmt && _form.openAmt != 0) {
            text = '请输入开通费用'
          } else if (!_form.merQuota) {
            text = '请输入商户名额数量'
          }
          text ? callback(text) : callback()
          break
        }
        case 'pluginSpecialConfs': {
          // 特殊费用
          if (_form.pluginSpecialConfs && _form.pluginSpecialConfs.length) {
            const numArr = []
            _form.pluginSpecialConfs.forEach((plug, plugIdx) => {
              // 数量需要做递增校验
              if (!plug.merNum) {
                text += `配置${plugIdx + 1}：请填写商户数量 `
              } else {
                if (numArr.includes(plug.merNum)) text += `配置${plugIdx + 1}：请勿重复配置 `
                numArr.push(plug.merNum)
              }
              if (plug.isAddYear == 1 && !plug.addYearAmt && plug.addYearAmt != 0) {
                text += `配置${plugIdx + 1}：请填写加收金额 `
              }
            })
          } else {
            text = `最少需要一条配置`
          }
          text ? callback(text) : callback()
          break
        }
        case 'minBkgeAmt': {
          console.log('minBkgeAmt', _form.minBkgeAmt, _form)
          // 抽佣门槛
          if (!_form.minBkgeAmt && _form.minBkgeAmt != 0) {
            text = `请填写抽佣门槛`
          }
          text ? callback(text) : callback()
          break
        }
        case 'yearAutoPay': {
          // 年费
          if (!_form.yearAutoPay && _form.yearAutoPay != 0) {
            text = `请填写年费`
          }
          text ? callback(text) : callback()
          break
        }
        case 'bkgeRate': {
          // 插件抽佣比
          if (!_form.bkgeRate && _form.bkgeRate != 0) {
            text = `请填写插件抽佣比`
          }
          text ? callback(text) : callback()
          break
        }
        case 'specialRoleRate': {
          // 插件抽佣比
          if (!_form.specialRoleRate && _form.specialRoleRate != 0) {
            text = `请填写特殊角色抽佣`
          }
          text ? callback(text) : callback()
          break
        }
        default:
          break
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.selectItem{
  width: 130px;
}
</style>
